<!-- 月份预估收入 -->
<template>
    <div>
      <el-form :model="data" ref="form" label-width="140px" size="small" :validate-on-rule-change="false" label-position="left" >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事项" prop="name">
              <el-input  v-model="data.name" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总支出" >
              <el-input  v-model="total" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='1月预估金额' prop="month1" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month1" :disabled="!isEdit"  placeholder="请输入" @focus="focus('month1')" @blur="changePrice('month1')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='2月预估金额' prop="month2" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month2" :disabled="!isEdit" placeholder="请输入" @focus="focus('month2')" @blur="changePrice('month2')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='3月预估金额' prop="month3" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month3" :disabled="!isEdit" placeholder="请输入" @focus="focus('month3')" @blur="changePrice('month3')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='4月预估金额' prop="month4" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month4"  :disabled="!isEdit" placeholder="请输入" @focus="focus('month4')" @blur="changePrice('month4')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='5月预估金额' prop="month5" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month5" :disabled="!isEdit" placeholder="请输入" @focus="focus('month5')" @blur="changePrice('month5')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='6月预估金额' prop="month6" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month6" :disabled="!isEdit" placeholder="请输入" @focus="focus('month6')" @blur="changePrice('month6')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='7月预估金额' prop="month7" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month7" :disabled="!isEdit" placeholder="请输入" @focus="focus('month7')" @blur="changePrice('month7')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='8月预估金额' prop="month8" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month8" :disabled="!isEdit" placeholder="请输入" @focus="focus('month8')" @blur="changePrice('month8')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='9月预估金额' prop="month9" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month9" :disabled="!isEdit" placeholder="请输入" @focus="focus('month9')" @blur="changePrice('month9')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='10月预估金额' prop="month10" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month10" :disabled="!isEdit"  placeholder="请输入" @focus="focus('month10')" @blur="changePrice('month10')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='11月预估金额' prop="month11" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month11" :disabled="!isEdit"  placeholder="请输入" @focus="focus('month11')" @blur="changePrice('month11')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label='12月预估金额' prop="month12" :rules="{required: true, message: '请输入', trigger: 'blur'}">
              <el-input type="number" v-model="data.month12" :disabled="!isEdit"  placeholder="请输入" @focus="focus('month12')" @blur="changePrice('month12')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="showFile">
          <el-col :span="24" style="min-height:50px;">
            <el-form-item label="附件" style="margin-bottom:0!important;">
              <el-upload class="upload-demo"  :file-list="fileList" action="no" :on-remove="handleRemove" :http-request="event => beforeupload(event.file)">
                <el-button type="primary" plain class="addSpan" style="margin-right: 10px" size="mini">上传附件</el-button>
              </el-upload>
              <el-button type="text" v-for="(file, i) in businessAttachmentMapListCloudDto" :key="i" @click="DownFile(file)">{{ file.fileTitle }} </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="height:50px;">
            <el-form-item label="提示："> {{ errorMessage.resultMessage }} </el-form-item>
          </el-col>
          <el-col :span="24" style="height:50px;">
            <el-form-item label="说明：">
              <el-input size="mini" type="textarea" autosize v-model="data.configDesc"></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-col v-if="isEdit">
          <el-form-item>
            <div class="t-right padding-top-15" >
              <el-button  type="primary" size="small" @click="save('form')" plain>确定</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
</template>

<script>
import { uploadPhoto } from '@/api';
import Api from '../../../../api/incomeAndExpenditurePlan';
export default {
  props: {
    monthData: {
      type: Object,
      default:()=>{},
    },
    assetCode:{
      type: String,
      default:'',
    },
    isEdit:{
      type: Boolean,
      default:false,
    },
  },
  data() {
    return {
      showFile:false,
      fileList:[],
      businessAttachmentMapListCloudDto:[],
      num1:'',
      paymentItemListCloudDto:[],
      data:{},
      total:0,
      errorMessage:{}
    };
  },
 
  created(){
    
  },
  methods: {
    init(initList){
      this.total = 0
      let data =Object.assign({}, this.monthData.planAssetContractDto, this.monthData.billConfigCloudDto) 
      this.businessAttachmentMapListCloudDto = this.monthData.businessAttachmentMapListCloudDto || []
      if(this.monthData.paymentItemListCloudDto&&this.monthData.paymentItemListCloudDto.length>0){
        this.paymentItemListCloudDto =this.monthData.paymentItemListCloudDto
      } else {
        this.paymentItemListCloudDto = initList
      }

      let total = 0

      this.paymentItemListCloudDto.forEach((ele,index)=>{
        if (!isNaN(Number(ele.paymentAmount))) {
          total = Number(total) + Number(ele.paymentAmount)
        }
        data['month'+(index+1)] = ele.paymentAmount
      })

      this.total = Number(total).toFixed(2)
      this.data = data

      this.fileList = this.monthData.businessAttachmentMapListCloudDto || []
      if(this.businessAttachmentMapListCloudDto&&this.businessAttachmentMapListCloudDto.length>0){
        this.showFile = true
      }
    },
    //保存
    async save() {
      this.$refs.form.validate(async isOK => {
        if (isOK) {
          this.paymentItemListCloudDto.forEach((ele,index)=>{
             ele.paymentAmount = this.data['month'+(index+1)]
          })
          let params ={
            assetCode:this.assetCode,
            planKey:this.$route.query.planKey,
            billConfigCloudDto:this.data,
            paymentItemListCloudDto:this.paymentItemListCloudDto,
            businessAttachmentMapListCloudDto:this.businessAttachmentMapListCloudDto
          }
          const res = await Api.configverify(params);
          if (res && res.success) {
            this.configverify = res;
            if (res.vilidateResult) {
              this.showFile = false
              this.search(params);
            } else {
              this.errorMessage = res
              this.showFile = true
              this.$message.warning('校验失败');
            }
          }
        }
      });
    },
    // 确定
    async search(params) {
      this.$refs.form.validate(async isOK => {
        if (isOK) {
          if (this.showFile) {
            if (this.businessAttachmentMapListCloudDto&&businessAttachmentMapListCloudDto.length>0 ) {
              this.$message.warning('文件和说明不能为空！');
              return;
            }
          }
          const res = await Api.create(params);
          if (res && res.success) {
            this.$emit('close-dialog2');
            this.closeDialog()
            this.$message.success(res.message);
          }
        }
      });
    },
    focus(val){
      this.num1 = this.data[val] || 0
    },
    changePrice(val){
      let num2 = this.data[val] || 0
      let total = this.total
      total = Number(total) - Number(this.num1) + Number(num2)

      this.total = Number(total).toFixed(2)
    },
    beforeupload(file, a) {
      uploadPhoto(file).then(res => {
        this.fileList.push(file)
        this.businessAttachmentMapListCloudDto = [{ fileUrl: res.data.rows[0].url, fileTitle: res.data.rows[0].originalName, fileId: res.data.rows[0].key,uid:file.uid }];
        this.$message.success('上传成功');
      });
    },
    handleRemove(file){
      this.businessAttachmentMapListCloudDto.forEach(((ele,index)=>{
        if(ele.uid == file.uid){
          this.businessAttachmentMapListCloudDto.splice(index, 1)
        }
      }))
    },
    DownFile(file) {
      window.open(file.fileUrl);
    },
    closeDialog(){
      this.data={}
      this.fileList = []
      this.businessAttachmentMapListCloudDto=[]
    }
  },
};
</script>

<style lang="scss" scoped>
  
  .el-row .el-col {
    height: 50px!important;
  }

</style>
